<template>
	<div class="device-utilization">
	  <el-card>
		<div style="font-weight:bold;margin-bottom:12px;">设备利用率排名（TOP4）</div>
		<!-- 利用率明细表格（上） -->
		<el-input
		  v-model="search"
		  placeholder="按名称/编号筛选"
		  clearable
		  style="width:180px;margin-bottom:12px;"
		/>
		<el-table
		  :data="filteredData"
		  border
		  size="small"
		  :row-class-name="rowClassName"
		  highlight-current-row
		  style="margin-bottom:22px;"
		>
		  <el-table-column prop="code" label="设备编号" width="120"/>
		  <el-table-column prop="name" label="设备名称" width="140"/>
		  <el-table-column prop="type" label="类型" width="100"/>
		  <el-table-column prop="utilization" label="利用率(%)" width="110">
			<template #default="scope">
			  <el-tag :type="scope.row.utilization>=95 ? 'success' : scope.row.utilization>=90 ? 'warning' : 'danger'">
				{{ scope.row.utilization }}
			  </el-tag>
			</template>
		  </el-table-column>
		  <el-table-column prop="runtime" label="累计运行(h)" width="110"/>
		  <el-table-column prop="desc" label="备注"/>
		</el-table>
		<!-- 利用率排名柱状图（下） -->
		<div>
		  <div style="font-weight:bold;margin-bottom:8px;">利用率前四名统计图</div>
		  <div ref="chartRef" style="width:100%;height:320px;"></div>
		</div>
	  </el-card>
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch, computed } from 'vue'
  import * as echarts from 'echarts'
  
  // 模拟利用率数据
  const rawData = [
	{ code: 'EQP-101', name: '高速压片机A', type: '压片机', utilization: 98, runtime: 238, desc: 'TOP1' },
	{ code: 'EQP-102', name: '自动灌装机B', type: '灌装机', utilization: 96, runtime: 210, desc: 'TOP2' },
	{ code: 'EQP-103', name: '灭菌柜C', type: '灭菌柜', utilization: 93, runtime: 203, desc: '' },
	{ code: 'EQP-104', name: '贴标机D', type: '贴标机', utilization: 91, runtime: 185, desc: '' },
	{ code: 'EQP-105', name: '装盒机E', type: '装盒机', utilization: 86, runtime: 167, desc: '' },
	{ code: 'EQP-106', name: '检查机F', type: '检查机', utilization: 79, runtime: 98, desc: '' }
  ]
  
  const top4Data = computed(() =>
	[...rawData].sort((a, b) => b.utilization - a.utilization).slice(0, 4)
  )
  const search = ref('')
  const filteredData = computed(() => {
	if (!search.value) return rawData
	return rawData.filter(item =>
	  item.name.includes(search.value) ||
	  item.code.includes(search.value)
	)
  })
  
  // 高亮TOP1行
  function rowClassName({ row }) {
	return row.utilization === Math.max(...rawData.map(d => d.utilization))
	  ? 'highlight-row'
	  : ''
  }
  
  // 利用率柱状图
  const chartRef = ref()
  let chart
  function renderChart() {
	if (!chart && chartRef.value) chart = echarts.init(chartRef.value)
	if (!chart) return
	chart.setOption({
	  grid: { left: 56, right: 16, bottom: 36, top: 40, containLabel: true },
	  tooltip: { trigger: 'axis' },
	  xAxis: {
		type: 'category',
		data: top4Data.value.map(d => d.name),
		axisTick: { alignWithLabel: true }
	  },
	  yAxis: {
		type: 'value',
		min: 0,
		max: 100,
		axisLabel: { formatter: '{value}%' }
	  },
	  series: [{
		type: 'bar',
		data: top4Data.value.map((d, i) => ({
		  value: d.utilization,
		  itemStyle: {
			color: i === 0 ? '#67C23A' : i === 1 ? '#409EFF' : i === 2 ? '#E6A23C' : '#909399'
		  }
		})),
		barWidth: 38,
		label: {
		  show: true,
		  position: 'top',
		  formatter: '{c}%'
		}
	  }]
	})
  }
  
  onMounted(() => {
	setTimeout(renderChart, 10)
  })
  watch(top4Data, renderChart)
  </script>
  
  <style scoped>
  .device-utilization {
	padding: 16px;
  }
  .highlight-row {
	background: #f5ffe5 !important;
  }
  </style>
  